<template>
  <div>
    <div style="background: #ebeef5; height: 40px">
      <div style="line-height: 40px; margin-left: 50px">帮助文档</div>
    </div>
    <!-- <div>基础文档</div> -->
    <div style="width: 80%; margin-left: 10%; padding-top: 20px">
      <el-input
        v-model="searchValue"
        class="input-with-select"
        placeholder="请输入搜索内容"
        @input="searchChange"
      >
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>

    <div>
      <div
        v-if="!meShow"
        style="width: 80%; margin-left: 10%; padding-top: 20px"
      >
        <div v-for="(items, index) in dataList" :key="index">
          <div
            style="border-bottom: 1px dashed #dcdfe6; cursor: pointer"
            @click="to(items.type_id)"
          >
            <div style="margin-left: 20px">
              <p style="font-size: 18px">{{ items.keyword }}</p>
              <p style="font-size: 10px">{{ items.created_at }}</p>
            </div>
          </div>
        </div>
      </div>
      <el-row
        v-if="meShow"
        class="tac"
        style="margin-top: 10px; margin-left: 10%"
      >
        <el-col :span="4" style="width: 210px; height: 80vh; overflow-y: auto">
          <el-menu
            class="el-menu-vertical-demo"
            :default-active="active"
            @close="handleClose"
            @open="handleOpen"
          >
            <el-submenu
              v-for="(items, index) in helpList"
              :key="index"
              :index="items.title"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ items.title }}</span>
              </template>
              <el-menu-item-group
                v-for="(itemss, key) in items.children"
                :key="key"
              >
                <el-menu-item
                  :index="itemss.id + '-' + 0"
                  @click="Submit(itemss.id)"
                >
                  {{ itemss.title }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
        <div
          style="margin-left: 30%; width: 700px; height: 80vh; overflow-y: auto"
        >
          <div v-for="(items, index) in boxList" :key="index">
            <h4>{{ items.title }}</h4>
            <div style="color: #c0c4cc">
              {{ items.created_at }}
            </div>
            <div @click.stop="see($event)" v-html="items.content"></div>
          </div>
        </div>
        <el-dialog title="图片" :visible.sync="dialogVisible" width="70%">
          <div>
            <el-image
              :src="src"
              style="width: 100%"
              @click="dialogVisible = false"
            />
          </div>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button type="primary" @click="dialogVisible = false">
              关闭
            </el-button> -->
          </span>
        </el-dialog>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { helpTypeList, helpDocList } from '@/api/help'

  export default {
    name: 'VabErrorLog',
    data() {
      return {
        searchValue: '',
        helpList: [],
        menu_key: '',
        active: '',
        boxList: [],
        meShow: true,
        dataList: [],
        src: '',
        dialogVisible: false,
        srcList: [],
      }
    },
    computed: {},
    watch: {},
    beforeMount() {},
    mounted() {
      this.init()
      // 查看路由是否有参数
      if (this.$route.query.id) {
        this.Submit(this.$route.query.id)
        this.active = this.$route.query.id + '-' + 0
      }
    },

    methods: {
      init() {
        helpTypeList().then((e) => {
          this.helpList = e.data
        })
      },
      Submit(id) {
        const data = {
          type_id: id,
        }
        helpDocList(data).then((i) => {
          this.boxList = i.data.data
          this.$nextTick(() => {
            const tagName = document.querySelectorAll('img')
            for (let item of tagName) {
              item.style.width = 40 + '%'
            }
          })
        })
      },
      see(e) {
        if (e.target.nodeName == 'IMG') {
          this.src = e.target.src
          //this.srcList.push = e.target.src
          this.dialogVisible = true
        }
      },

      searchChange(e) {
        this.meShow = false
        const data = {
          keywords: e,
        }
        helpDocList(data).then((e) => {
          this.dataList = e.data.data
        })
      },
      to(e) {
        this.Submit(e)
        this.meShow = true
        this.active = e + '-' + 0
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
